import 'package:base_app/commons/routes/route_names.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ColorPage extends StatelessWidget {
  const ColorPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Wrap(
            spacing: 4,
            runSpacing: 4,
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.primary,
                ),
                onPressed: () => {},
                child: const Text('primary', style: TextStyle(color: Colors.white),),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onPrimary,
                ),
                onPressed: () => {},
                child: const Text('onPrimary'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.primaryContainer,
                ),
                onPressed: () => {},
                child: const Text('primaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
                onPressed: () => {},
                child: const Text('onPrimaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.primaryFixed,
                ),
                onPressed: () => {},
                child: const Text('primaryFixed',style: TextStyle(color: Colors.white)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onPrimaryFixed,
                ),
                onPressed: () => {},
                child: const Text('onPrimaryFixed'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.primaryFixedDim,
                ),
                onPressed: () => {},
                child: const Text('primaryFixedDim',style: TextStyle(color: Colors.white)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onPrimaryFixedVariant,
                ),
                onPressed: () => {},
                child: const Text('onPrimaryFixedVariant'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.secondary,
                ),
                onPressed: () => {},
                child: const Text('secondary',style: TextStyle(color: Colors.white)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSecondary,
                ),
                onPressed: () => {},
                child: const Text('onSecondary'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
                ),
                onPressed: () => {},
                child: const Text('secondaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSecondaryContainer,
                ),
                onPressed: () => {},
                child: const Text('onSecondaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.secondaryFixed,
                ),
                onPressed: () => {},
                child: const Text('secondaryFixed',style: TextStyle(color: Colors.white)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.secondaryFixedDim,
                ),
                onPressed: () => {},
                child: const Text('secondaryFixedDim',style: TextStyle(color: Colors.white)),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSecondaryFixed,
                ),
                onPressed: () => {},
                child: const Text('onSecondaryFixed'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSecondaryFixedVariant,
                ),
                onPressed: () => {},
                child: const Text('onSecondaryFixedVariant'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.tertiary,
                ),
                onPressed: () => {},
                child: const Text('tertiary'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onTertiary,
                ),
                onPressed: () => {},
                child: const Text('onTertiary'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.tertiaryContainer,
                ),
                onPressed: () => {},
                child: const Text('tertiaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onTertiaryContainer,
                ),
                onPressed: () => {},
                child: const Text('onTertiaryContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.tertiaryFixed,
                ),
                onPressed: () => {},
                child: const Text('tertiaryFixed'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.tertiaryFixedDim,
                ),
                onPressed: () => {},
                child: const Text('tertiaryFixedDim'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onTertiaryFixed,
                ),
                onPressed: () => {},
                child: const Text('onTertiaryFixed'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onTertiaryFixedVariant,
                ),
                onPressed: () => {},
                child: const Text('onTertiaryFixedVariant'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.error,
                ),
                onPressed: () => {},
                child: const Text('error'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onError,
                ),
                onPressed: () => {},
                child: const Text('onError'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.errorContainer,
                ),
                onPressed: () => {},
                child: const Text('errorContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onErrorContainer,
                ),
                onPressed: () => {},
                child: const Text('onErrorContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.outline,
                ),
                onPressed: () => {},
                child: const Text('outline'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.outlineVariant,
                ),
                onPressed: () => {},
                child: const Text('outlineVariant'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surface,
                ),
                onPressed: () => {},
                child: const Text('surface'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSurface,
                ),
                onPressed: () => {},
                child: const Text('onSurface'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceDim,
                ),
                onPressed: () => {},
                child: const Text('surfaceDim'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceBright,
                ),
                onPressed: () => {},
                child: const Text('surfaceBright'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceContainerLowest,
                ),
                onPressed: () => {},
                child: const Text('surfaceContainerLowest'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceContainerLow,
                ),
                onPressed: () => {},
                child: const Text('surfaceContainerLow'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
                ),
                onPressed: () => {},
                child: const Text('surfaceContainer'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh,
                ),
                onPressed: () => {},
                child: const Text('surfaceContainerHigh'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
                ),
                onPressed: () => {},
                child: const Text('surfaceContainerHighest'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onSurfaceVariant,
                ),
                onPressed: () => {},
                child: const Text('onSurfaceVariant'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.inverseSurface,
                ),
                onPressed: () => {},
                child: const Text('inverseSurface'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.onInverseSurface,
                ),
                onPressed: () => {},
                child: const Text('onInverseSurface'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
                ),
                onPressed: () => {},
                child: const Text('inversePrimary'),
              ),

              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.shadow,
                ),
                onPressed: () => {},
                child: const Text('shadow'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.scrim,
                ),
                onPressed: () => {},
                child: const Text('scrim'),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.surfaceTint,
                ),
                onPressed: () => {},
                child: const Text('surfaceTint', style: TextStyle(color: Colors.white),),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
